Введение в JavaScript

       

Options[]


Массив options[] — это свойство объекта Select. Элементы этого массива обладают теми же свойствами, что и объекты Option. Собственно, это и есть объекты Option, встроенные в документ. Они создаются по мере загрузки страницы браузером. Программист имеет возможность не только создавать новые объекты Option, но и удалять уже созданные браузером объекты:

<FORM NAME=f0> <SELECT NAME=s0> <OPTION>Первый вариант <OPTION>Второй вариант <OPTION>Третий вариант </SELECT> <INPUT TYPE=button VALUE="Удалить последний вариант" onClick="document.f0.s0.options[document.f0.s0.length-1]=null;"> <INPUT TYPE=reset VALUE=Reset> </FORM>

В данном примере при загрузке страницы с сервера определено три альтернативы. Они появляются, если выбрать поле select. После нажатия на кнопку удаления последнего варианта ("Delete last option") остается только две альтернативы. Если еще раз нажать на кнопку удаления альтернативы, останется только одна альтернатива и т.д. В конечном счете, вариантов может не остаться вообще, т.е. пользователь лишится возможности выбора. Кнопка Reset показывает, что альтернативы утеряны бесследно, так как после нажатия на эту кнопку содержание поля SELECT не восстанавливается.

Теперь, используя конструктор Option, сделаем процесс обратимым:

function def_f1() { document.f1.s1.options[0] = new Option("вариант Один","",true,true); document.f1.s1.options[1] = new Option("вариант Два"); document.f1.s1.options[2] = new Option("вариант Три"); return false; } ... <FORM NAME=f1 onReset="def_f1();"> <SELECT NAME=s1> <OPTION>вариант Один <OPTION>вариант Два <OPTION>вариант Три </SELECT> <INPUT TYPE=button VALUE="Удалить последний вариант" onClick="document.f1.s1.options[document.f1.s1.length-1]=null;"> <INPUT TYPE=reset VALUE=Reset> </FORM>

В данном случае мы обрабатываем событие reset (контейнер FORM). При этом создаем новые объекты типа Option и подчиняем их объекту Select. При этом первый элемент массива должен быть выбран по умолчанию, чтобы смоделировать поведение при начальной загрузке страницы.

В HTML-формах нельзя реализовать подменю. JavaScript позволяет обойти это ограничение и выполнить замену путем программирования поля select.



Содержание раздела